<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/pages/public.css">
	<link rel="stylesheet" type="text/css" href="css/pages/retrieve-fee.css">
</head>
<body>
	<h2>回收费用设置</h2>
	<div id="app-root" v-cloak>
		<div class="container">
			<div class="row">
				<div class="col-md-2">
					<ul id="accordion" class="accordion">
						<li class="" v-for="brand in brands">
							<div class="link" @click="brand_selected(brand.bid)">{{brand.b_name}}<i class="fa fa-chevron-down"></i></div>
							<ul class="submenu" style="display: none;">
								<li  v-for="version in brand.version"><a @click="version_selected(version.vid, $event)">{{version.v_name}}</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="col-md-9 main-section-wrapper">
					<div class="section-header">费用设置</div>
					<div class="fee-wrapper">
						<div class="col-md-6 highest-price">
							<span>最高回收价：</span>
							<input id="max-price" type="text" class="red" v-model="v_max_price" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="set_max_price">
							<span class="red">元</span>
							<label class="fa fa-pencil" aria-hidden="true" for="max-price"></label>
						</div>
						<div class="col-md-6 lowest-price">
							<span>最低回收价：</span>
							<input id="min-price" type="text" class="red" v-model="v_min_price" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="set_min_price">
							<span class="red">元</span>
							<label class="fa fa-pencil" aria-hidden="true" for="min-price"></label>
						</div>
					</div>
					<button class="btn btn-default add-selection" @click="add_category">添加选项</button>
					<table class="table table-bordered">
						<tr>
							<th>选项分类</th>
							<th>必选</th>
							<th>单选</th>
							<th>选项</th>
						</tr>
						<tr v-for="category in categorys">
							<td class="v-middle">{{category.c_name}}<i class="fa fa-trash" aria-hidden="true" @click="delete_category(category.cid)"></i></td>
							<td class="v-middle"><input type="checkbox" :checked="category.c_require == 1 ? true : false" :id="'category-require-' + category.cid" @change="update_category(category.cid)"></td>
							<td class="v-middle"><input type="checkbox" :checked="category.c_radio == 1 ? true : false" :id="'category-radio-' + category.cid" @change="update_category(category.cid)"></td>
							<td class="option-wrapper">
								<div v-for="option in category.option">{{option.o_label}}(-{{option.o_price}}元)<i class="fa fa-pencil" aria-hidden="true" @click="edit_option(['update',option.oid,option.o_label,option.o_price])"></i><i class="fa fa-trash" aria-hidden="true" @click="delete_option(option.oid)"></i></div>
								<div class="add-option" @click="edit_option(['add',category.cid])">添加</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="categoryModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="categoryModalLabel">{{c_title}}</h4>
						</div>
						<div class="modal-body"><input type="text" class="form-control" v-model="c_name"></div>
						<div class="modal-body">
							<label>是否必选：</label>
							<input id="o_require_no" type="radio" value="0" v-model="o_require">
							<label for="o_require_no">非必选</label>
							<input id="o_require_yes" type="radio" value="1" v-model="o_require">
							<label for="o_require_yes">必选</label>
						</div>
						<div class="modal-body">
							<label>是否单选：</label>
							<input id="o_radio_no" type="radio" value="0" v-model="o_radio">
							<label for="o_radio_no">非单选</label>
							<input id="o_radio_yes" type="radio" value="1" v-model="o_radio">
							<label for="o_radio_yes">单选</label>
						</div>
						<div class="modal-body" v-show="error">
							<div class="alert alert-danger" role="alert">
								<strong>Warning!</strong> {{error_message}}
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" @click="submitCategory">确定</button>
						</div>
					</div>
				</div>
			</div>
			<div class="modal fade" id="optionModal" tabindex="-1" role="dialog" aria-labelledby="optionModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="optionModalLabel">{{o_title}}</h4>
						</div>
						<div class="modal-body clearfix">
							<div class="col-md-4"><label>选项名称：</label></div>
							<div class="col-md-8"><input type="text" class="form-control" v-model="o_name"></div>
						</div>
						<div class="modal-body clearfix">
							<div class="col-md-4"><label>选项价格：</label></div>
							<div class="col-md-8"><input type="text" class="form-control" v-model="o_price"></div>
						</div>
						<div class="modal-body" v-show="error">
							<div class="alert alert-danger" role="alert">
								<strong>Warning!</strong> {{error_message}}
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" @click="submitOption">确定</button>
						</div>
					</div>
				</div>
			</div>
			<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" style="text-align: center;">是否确认删除？</h4>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" data-dismiss="modal" @click="ok">确定</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/pages/retrieve-fee.js"></script>
</body>
</html>